<template>
  <v-card class="card" >
<!--    <v-row>-->

<!--      <v-col cols="3" >-->
        <div class="left" style="float: left;width: 130px;">

          <div class="avatar">
            <v-avatar
                @click="ToUserPage"
                rounded
                size="85"
                style="border-radius: 30%!important; background-color: lightgray "
            >

              <v-img
                  v-if="author.avatar !== ''"
                  :src="author.avatar"
              ></v-img>
              <v-img v-else src="@/assets/images/avatars/2.png"></v-img>
              <span v-if="!author.avatar">{{author.name}}</span>
            </v-avatar>
          </div>

<!--          <div style="margin-left: 42px;margin-top: 3%">-->
<!--            <v-icon style="color: #5e5669" small>-->
<!--              {{icons.mdiEye}}-->
<!--            </v-icon>-->
<!--            <span style="color: #131120;font-size: 13px"> {{author.nView}}</span>-->
<!--          </div>-->

        </div>
<!--      </v-col>-->

<!--      <v-col cols="9" class="right">-->

<!--        <v-divider vertical style="margin-top: 5%"></v-divider>-->
<!--      <v-divider :vertical="$vuetify.breakpoint.mdAndUp"></v-divider>-->


        <div class="right" >
<!--          <div style="float: right;margin-top: 1%">-->
<!--            <v-btn-->
<!--                text-->
<!--                outlined-->
<!--                color="primary"-->
<!--                x-small-->
<!--                elevation="4"-->
<!--                @click="follow"-->
<!--            >-->
<!--              + 关注 | {{this.n_follower}}-->
<!--            </v-btn>-->
<!--          </div>-->
          <div class="name" @click="ToUserPage" >{{author.name}}</div>
          <div>
            <span class="h_index">h-index: {{author.h_index}}</span>
            <span class="n_pubs">论文数: {{author.n_pubs}}</span>
            <span class="n_citation">引用数: {{author.n_citation}}</span>
          </div>
          <div v-if="author.position && author.position.length<100" style="margin-top: 0.6%">
            <v-icon
                style="color: purple"
                small
            >{{icons.mdiBadgeAccountHorizontal}}</v-icon>
            <span style="margin-left: 1%;font-size: 10px;color: black">{{author.position}}</span>
          </div>
          <div v-if="author.org && author.org.length<100">
            <v-icon
                style="color: purple"
                small
            >{{icons.mdiBank}}</v-icon>
            <span style="margin-left: 1%;font-size: 10px;color: black">{{author.org}}</span>
          </div>


          <div style="padding-top: 0.6%; display: flex" v-if="author.tags && author.tags.length < 5">
            <v-icon
                style="color: purple;"
                small
            >{{icons.mdiMagnify}}</v-icon>
              <span style="padding-left: 1%;font-size: 10px;color: black; display: inline-block" class="searchField;">研究领域:</span>
              <span style="padding-left: 1%;font-size: 10px;color: black; display: inline-block" class="searchField" v-for="(item, index) in author.tags" :key="index">
                  {{item.t}}
              </span>
          </div>

        </div>
<!--      </v-col>-->

<!--    </v-row>-->

  </v-card>
</template>

<script>

import {
  mdiAccountOutline, mdiBadgeAccountHorizontal, mdiBank, mdiEye,mdiMagnify,
} from "@mdi/js";

export default {
  name: "UserCard",
  props:['author'],

  data() {
    return {
      icons :{
        mdiAccountOutline,
        mdiBadgeAccountHorizontal,
        mdiBank,
        mdiEye,
        mdiMagnify,
      },
      n_follower: 13,
      author_: {
        "id": "53f43f5adabfaedf435b9bdf",
        "name": "J\u00f6rg B\u00e4ssmann",
        "h_index": 0,
        "n_pubs": 1,
        "tags": [
                  {"w": 1, "t": "Vehicle Theft .Immobilisation .Crime Prevention.Crimereduction . Displacement .Motorcycle Theft .Opportunistic Offenders .Professional Offenders . Evaluation.Mixed-Methods Design"}
                ],
        "pubs": [
                  {"i": "53e9b4a1b7602d9703fad4e7", "r": 0}
                ],
        "n_citation": 0,
        "orgs": ["Bingen am Rhein, Germany"],
        "n_visit": 238,
      }
    }
  },

  mounted() {

  },

  methods: {
    follow() {
    },
    ToUserPage() {
      console.log(this.author.id)
      this.$router.push({ path: 'profile/' + this.author.id + '/'})
    },

  }

}
</script>

<style scoped>

.card {
  width: 70%;
  min-height: 155px;
}

.avatar {
  margin-left: 23px;
  margin-top: 13%;
}

.avatar:hover {
  cursor: pointer;
}

.right {
  padding-top: 1.2%;
  padding-bottom: 1.2%;
  padding-right: 3%;
  /*padding-left: 10%;*/
  margin-left: 9%;
}


.name {
  font-size: 23px;
  color: #131120;
}
.name:hover {
  cursor: pointer;
  color: purple;
}

.h_index {
  border: 2px solid purple ;
  border-radius: 3px;
  padding-left: 0.5%;
  padding-right: 0.5%;
  padding-bottom: 0.2%;
  font-size: 10%;
  color: black;
}

.n_pubs {
  border: 2px solid purple ;
  border-radius: 3px;
  padding-left: 0.5%;
  padding-right: 0.5%;
  padding-bottom: 0.2%;
  font-size: 10%;
  margin-left: 1%;
  color: black;
}

.n_citation {
  border: 2px solid purple ;
  border-radius: 3px;
  padding-left: 0.5%;
  padding-right: 0.5%;
  padding-bottom: 0.2%;
  font-size: 10%;
  margin-left: 1%;
  color: black;
}

.searchField {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}



</style>